<template>
  <div class="chat-gpt">
    <div id="chat-list" ref="chatListRef" class="chat-list">
      <!-- 系统信息 -->
      <div class="chat-item-box odd">
        <img alt="" class="img" src="@/assets/avatar/system.png" />
        <div class="content">
          <div>用户提交的信息：</div>
          <!--
          <el-input
            v-for="input in info"
            :key="input.field"
            v-model="form[input.field]"
            class="info-input"
            :placeholder="input.placeholder"
          />
          <el-button size="mini" style="float: right" type="success" @click="handleAfterForm">下一步</el-button>
          -->
        </div>
      </div>

      <!-- 对话内容 -->
      <div v-for="(item, index) in chatList" :key="index" class="chat-item">
        <div v-if="item.author === 'me'" class="chat-item-box" :class="{ even: item.author === 'me' }">
          <div class="content">{{ item.data.text }}</div>
          <img alt="" class="img" src="@/assets/avatar/user.png" />
        </div>

        <div v-else class="chat-item-box" :class="{ odd: item.author === 'user1' }">
          <img alt="" class="img" src="@/assets/avatar/chat.png" />
          <div class="content" v-html="item.data.text"></div>
        </div>
      </div>
    </div>

    <div class="footer">
      <el-input v-model="message" @keyup.enter.native="onMessageWasSent(message)" />
      <!--
      <el-upload action="https://jsonplaceholder.typicode.com/posts/" class="upload-demo" :limit="1">
        <img alt="" src="../../../../assets/images/upload.png" style="width: 20px; height: 20px" />
      </el-upload>
      -->
      <img alt="" src="@/assets/images/send.png" style="width: 50px; height: 50px" @click="onMessageWasSent(message)" />
    </div>
  </div>
</template>

<script>
  import io from 'socket.io-client'

  export default {
    name: 'ChatDialog',
    data() {
      return {
        info: [
          { field: 'field1', placeholder: '建设单位全称？' },
          { field: 'field2', placeholder: '本项目名称？' },
          { field: 'field3', placeholder: '所属行业？' },
        ],
        form: {},
        chatList: [],
        message: '',
      }
    },
    created() {
      // 建立服务器的连接
      // console.log('连接')
      this.socket = io('http://toutiao.itheima.net', {
        query: {
          token: '8d6b045d-a15f-4d4a-9841-340ddf27a283',
        },
        transports: ['websocket'],
      })
      // console.log('socket', this.socket)
      // 收消息
      this.socket.on('message', (data) => {
        // console.log('收到消息', data)
        // 将内容添加到聊天列表中
        const item = {
          type: 'text',
          author: 'user1',
          data: { text: `${data.msg}` },
        }
        this.chatList.push(item)
        // this.chatList.push({
        //   isme: false,
        //   t: data.msg,
        // });
        // 自动滚动到底部
        this.$nextTick(() => {
          // 滚动到最后面
          this.$refs.chatListRef.scrollTop = this.$refs.chatListRef.scrollHeight
        })
      })

      this.info.forEach((_) => {
        this.form[_.field] = ''
      })
    },
    methods: {
      handleAfterForm() {
        this.$refs.chatListRef.scrollTop = this.$refs.chatListRef.scrollHeight
      },
      // 发送消息
      onMessageWasSent(msg) {
        if (!msg) {
          return
        }
        const message = { type: 'text', author: 'me', data: { text: msg } }
        // called when the user sends a message
        // console.log('限制性这个', message)
        this.chatList = [...this.chatList, message]
        // 将消息发送到服务器
        this.socket.emit('message', {
          msg: message.data.text,
          timestamp: Date.now(),
        })
        this.message = ''
        // console.log('发送到服务器')
        // 自动滚动到底部
        this.$nextTick(() => {
          // 滚动到最后面
          this.$refs.chatListRef.scrollTop = this.$refs.chatListRef.scrollHeight
        })
      },
    },
  }
</script>

<style scoped lang="scss">
  .chat-gpt {
    height: calc(100vh - 80px);
    padding: 0 120px 10px;
    transform: rotate(360deg);
    flex: 1;
    overflow: auto;

    .chat-list {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: calc(100% - 70px);
      box-sizing: border-box;
      overflow: auto;
      &::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }

      .chat-item-box {
        display: flex;
        margin-top: 2rem;

        > div {
          max-width: 90%;
          padding: 0.6rem;
          opacity: 0.8;

          font-size: 0.9rem;
          font-family: FZLanTingHei-L-GBK;
          font-weight: 400;
          color: #c5e7ff;
          text-align: start;
        }

        &.even {
          justify-content: flex-end;

          .content {
            background: #0026ff;
            border-radius: 8px;
          }

          .img {
            margin-left: 1rem;
          }
        }

        &.odd {
          justify-content: flex-start;

          .content {
            background: #f0f0f0;
            color: black;
            border-radius: 8px;
          }

          .img {
            margin-right: 1rem;
          }
        }

        img {
          width: 2rem;
          height: 2rem;
        }
      }
    }

    ::v-deep .info-input {
      .el-input__inner {
        height: 30px;
        border-radius: 8px;
        margin-bottom: 10px;
      }

      &:last-child .el-input__inner {
        margin-bottom: 0;
      }
    }
  }

  .footer {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;

    .el-input {
      width: 100%;

      ::v-deep .el-input__inner {
        height: 40px;
        border-radius: 10px;
      }
    }

    .upload-demo {
      position: absolute;
      right: 60px;
      bottom: 20px;
      transform: translateY(12px);
    }

    img {
      position: absolute;
      right: 0;
      bottom: 0;
      vertical-align: baseline;
      cursor: pointer;
    }
  }
</style>
